<template>
  <view class="content">
    <view class="contentbox" :style="'height:'+headHeight+'px;'" @click="goBack">
      <view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
        <image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
      </view>
    </view>
    <image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
    <view class="head-con">
      <view class="open-box">
        <view class="title">无感开通</view>
        <view class="name">先离后付仅限路内及部分停车场</view>
        <view class="go">
          <view>已开通先离后付的停车场</view>
          <image :src="imageUrl +'next.png'" mode="widthFix" class="next-img"></image>
        </view>
      </view>
      <image :src="imageUrl +'s1.png'" mode="widthFix" class="l-img"></image>
    </view>
    <view class="mores">
      <view class="hcons">
        <view class="money">
          <image :src="imageUrl +'wx1.png'" mode="widthFix"></image>
          <view>钱包自动支付
            <text>(￥100)</text>
          </view>
        </view>
        <view class="rname">立即充值</view>
      </view>
      <view class="license-plate">
        <view class="number">鄂E·12345</view>
        <view class="gos">
          <view>立即开启</view>
          <image :src="imageUrl +'next.png'" mode="widthFix" class="next-img"></image>
        </view>
      </view>
    </view>
    <view class="mores">
      <view class="hcons">
        <view class="money">
          <image :src="imageUrl +'wx3.png'" mode="widthFix"></image>
          <view>微信无感支付</view>
        </view>
      </view>
      <view class="license-plate">
        <view class="number">鄂E·12345</view>
        <view class="gos">
          <view>预约</view>
          <image :src="imageUrl +'next.png'" mode="widthFix" class="next-img"></image>
        </view>
      </view>
    </view>
    <view class="blue">
      <view class="up">
        <view class="l-cup">
          <view class="l-title">信用离场</view>
          <view class="l-name">部分停车场支持信用离场</view>
        </view>
        <view class="gox">
          <view>立即关闭</view>
          <image :src="imageUrl +'next2.png'" mode="widthFix"></image>
        </view>
      </view>
      <view class="down">
        <image :src="imageUrl +'wx2.png'" mode="widthFix" class="zd-img"></image>
        <view>支持信用离场的停车场清单</view>
        <image :src="imageUrl +'left3.png'" mode="widthFix" class="le-img"></image>
      </view>
    </view>
    <view class="null"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headHeight: 0,
      navBarHeight: 0,
      imageTop: 0,
      right: 0
    }
  },
  onLoad() {
    // 获取胶囊按钮位置
    // 获取系统信息（主要是状态栏高度）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync();

    // 计算顶部总高度：从屏幕顶部到导航栏底部的距离
    const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
    const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

    console.log('状态栏高度:', statusBarHeight);
    console.log('胶囊按钮信息:', menuButtonInfo);
    console.log('导航栏高度:', navBarHeight);
    console.log('顶部总高度:', totalTopHeight);
    this.headHeight = totalTopHeight
    this.navBarHeight = menuButtonInfo.height
    this.imageTop = menuButtonInfo.top
    this.right = menuButtonInfo.width + 20
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F4FAF7;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg-img {
  width: 750rpx;
  height: 520rpx;
  position: absolute;
  top: 0;
}

.contentbox {
  width: 750rpx;
  position: relative;
  z-index: 999;

  .container {
    width: 750rpx;
    position: absolute;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 86rpx;

    .title-names {
      width: 750rpx;
      position: absolute;
      text-align: center;
    }

    .logo {
      margin-left: 18rpx;
      width: 40rpx;
      height: 40rpx;
      position: relative;
      z-index: 9999;
    }

    .seandcode {
      width: 64rpx;
      height: 64rpx;
      position: relative;
      z-index: 9999;
    }
  }
}

.head-con {
  width: 750rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .open-box {
    margin-left: 50rpx;

    .title {
      font-size: 48rpx;
      color: #1C274C;
    }

    .name {
      font-size: 28rpx;
      color: rgba(40, 40, 40, 0.6);
      margin-top: 10rpx;
    }

    .go {
      padding: 0 20rpx;
      height: 48rpx;
      margin-top: 40rpx;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to right, #00BBFF, #5ADA7A);

      view {
        font-size: 24rpx;
        color: #FFFFFF;
        margin-right: 10rpx;
      }

      image {
        width: 14rpx;
        height: 14rpx;
      }
    }
  }

  .l-img {
    width: 240rpx;
    height: 240rpx;
    margin-right: 40rpx;
  }
}

.mores {
  width: 690rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-top: 40rpx;
  padding: 20rpx 0;
  position: relative;

  .hcons {
    width: 630rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20rpx;

    .money {
      display: flex;
      align-items: center;

      image {
        width: 48rpx;
        height: 48rpx;
      }

      view {
        margin-left: 20rpx;
        font-size: 32rpx;
        color: #1C274C;

        text {
          margin-left: 20rpx;
          font-size: 28rpx;
          color: #1C274C;
        }
      }
    }

    .rname {
      font-size: 24rpx;
      color: #24A7CE;
    }
  }

  .license-plate {
    width: 630rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20rpx;
    margin-top: 10rpx;
    background: linear-gradient(to right, #F4FAF7, #FFFFFF);
    border-radius: 8rpx;

    .number {
      font-size: 28rpx;
      color: #24A7CE;
      margin-left: 20rpx;
    }

    .gos {
      padding: 0 20rpx;
      height: 48rpx;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to right, #00BBFF, #5ADA7A);

      view {
        font-size: 24rpx;
        color: #FFFFFF;
        margin-right: 10rpx;
      }

      image {
        width: 14rpx;
        height: 14rpx;
      }
    }
  }
}

.blue {
  width: 690rpx;
  padding: 20rpx 0;
  border: 2px solid #FFFFFF;
  background-color: rgba(36, 167, 206, 0.1);
  margin-top: 20rpx;
  border-radius: 20rpx;

  .up {
    width: 640rpx;
    margin-left: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .l-cup {
      .l-title {
        font-size: 36rpx;
        color: #24A7CE;
      }

      .l-name {
        font-size: 24rpx;
        color: rgba(40, 40, 40, 0.6);
        margin-top: 10rpx;
      }
    }

    .gox {
      padding: 0 20rpx;
      height: 48rpx;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to right, #ffffff, #ffffff);

      view {
        font-size: 24rpx;
        color: #24A7CE;
        margin-right: 10rpx;
      }

      image {
        width: 14rpx;
        height: 14rpx;
      }
    }
  }

  .down {
    width: 650rpx;
    height: 56rpx;
    margin-top: 20rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;

    .zd-img {
      width: 32rpx;
      height: 32rpx;
      margin-left: 10rpx;
    }

    view {
      font-size: 24rpx;
      color: #24A7CE;
      margin-left: 10rpx;
    }

    .le-img {
      width: 16rpx;
      height: 16rpx;
      margin-left: 10rpx;
    }
  }
}

.null {
  width: 750rpx;
  height: 148rpx;
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
